<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${product.name} - 运动商城</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css">
</head>
<body>
    <!-- 导航栏 -->
    <jsp:include page="common/header.jsp"/>
    
    <!-- 商品详情 -->
    <div class="container py-5">
        <!-- 面包屑导航 -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="${pageContext.request.contextPath}/">首页</a></li>
                <li class="breadcrumb-item"><a href="${pageContext.request.contextPath}/product/category/${product.categoryId}">分类</a></li>
                <li class="breadcrumb-item active" aria-current="page">${product.name}</li>
            </ol>
        </nav>
        
        <!-- 商品信息 -->
        <div class="row">
            <!-- 商品图片 -->
            <div class="col-md-6 mb-4">
                <div class="product-images">
                    <div class="main-image-container">
                        <img src="${not empty product.mainImage ? product.mainImage : pageContext.request.contextPath.concat('/static/images/product-default.jpg')}" class="img-fluid" alt="${product.name}" id="main-image">
                    </div>
                    <c:if test="${not empty product.subImages}">
                        <div class="thumbnails mt-3">
                            <div class="row">
                                <c:forEach items="${product.subImages.split(',')}" var="image" varStatus="status">
                                    <div class="col-3">
                                        <img src="${image}" class="img-thumbnail thumb-image" alt="Thumbnail ${status.index}" onclick="changeMainImage('${image}')">
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                    </c:if>
                </div>
            </div>
            
            <!-- 商品详细信息 -->
            <div class="col-md-6">
                <h2 class="product-title">${product.name}</h2>
                <p class="text-muted">${product.subtitle}</p>
                
                <div class="product-price my-4">
                    <span class="current-price">¥${product.price}</span>
                </div>
                
                <div class="product-stock my-3">
                    <span class="stock-label">库存:</span>
                    <span class="stock-value">${product.stock > 0 ? product.stock : '缺货'}</span>
                </div>
                
                <div class="product-quantity my-3">
                    <label for="quantity" class="quantity-label">数量:</label>
                    <div class="input-group" style="width: 150px;">
                        <div class="input-group-prepend">
                            <button class="btn btn-outline-secondary" type="button" id="quantity-minus">-</button>
                        </div>
                        <input type="number" class="form-control text-center" id="quantity" min="1" max="${product.stock}" value="1">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" id="quantity-plus">+</button>
                        </div>
                    </div>
                </div>
                
                <div class="product-actions my-4">
                    <button class="btn btn-primary btn-lg" id="add-to-cart" ${product.stock <= 0 ? 'disabled' : ''}>
                        <i class="fas fa-shopping-cart me-2"></i> 加入购物车
                    </button>
                    <button class="btn btn-danger btn-lg" id="buy-now" ${product.stock <= 0 ? 'disabled' : ''}>
                        <i class="fas fa-bolt me-2"></i> 立即购买
                    </button>
                </div>
                
                <div class="product-meta mt-4">
                    <p><strong>商品编号:</strong> ${product.id}</p>
                    <p><strong>分类:</strong> <a href="${pageContext.request.contextPath}/product/category/${product.categoryId}">运动装备</a></p>
                    <p><strong>销量:</strong> ${product.soldCount}</p>
                    <p><strong>标签:</strong> 
                        <span class="badge badge-primary">${product.isHot == 1 ? '热门' : ''}</span> 
                        <span class="badge badge-success">${product.isNew == 1 ? '新品' : ''}</span>
                    </p>
                </div>
            </div>
        </div>
        
        <!-- 商品详细描述 -->
        <div class="row mt-5">
            <div class="col-12">
                <ul class="nav nav-tabs" id="productTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">商品详情</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="reviews-tab" data-toggle="tab" href="#reviews" role="tab" aria-controls="reviews" aria-selected="false">用户评价</a>
                    </li>
                </ul>
                <div class="tab-content p-4 border border-top-0" id="productTabContent">
                    <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                        <div class="product-description">
                            ${not empty product.detail ? product.detail : '暂无商品详情'}
                        </div>
                    </div>
                    <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                        <p>暂无评价</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 相关商品推荐 -->
        <div class="related-products mt-5">
            <h3 class="section-title">相关商品推荐</h3>
            <div class="row">
                <c:forEach items="${relatedProducts}" var="related" begin="0" end="3">
                    <div class="col-md-3 mb-4">
                        <div class="product-card">
                            <a href="${pageContext.request.contextPath}/product/detail/${related.id}">
                                <img src="${not empty related.mainImage ? related.mainImage : pageContext.request.contextPath.concat('/static/images/product-default.jpg')}" alt="${related.name}" class="product-img">
                                <div class="product-info">
                                    <h5 class="product-name">${related.name}</h5>
                                    <p class="product-subtitle">${related.subtitle}</p>
                                    <div class="product-price">¥${related.price}</div>
                                </div>
                            </a>
                            <button class="btn add-to-cart-sm" data-product-id="${related.id}"><i class="fas fa-shopping-cart me-2"></i>加入购物车</button>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <jsp:include page="common/footer.jsp"/>
    
    <!-- JavaScript 文件 -->
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 数量加减按钮
            $('#quantity-minus').click(function() {
                var quantity = parseInt($('#quantity').val());
                if (quantity > 1) {
                    $('#quantity').val(quantity - 1);
                }
            });
            
            $('#quantity-plus').click(function() {
                var quantity = parseInt($('#quantity').val());
                var max = parseInt($('#quantity').attr('max'));
                if (quantity < max) {
                    $('#quantity').val(quantity + 1);
                }
            });
            
            // 加入购物车
            $('#add-to-cart').click(function() {
                var productId = ${product.id};
                var quantity = parseInt($('#quantity').val());
                
                $.ajax({
                    url: '${pageContext.request.contextPath}/cart/add',
                    type: 'POST',
                    data: {
                        productId: productId,
                        quantity: quantity
                    },
                    success: function(response) {
                        if (response.success) {
                            alert('已成功加入购物车');
                        } else {
                            alert(response.message || '加入购物车失败');
                        }
                    },
                    error: function() {
                        alert('加入购物车失败，请稍后再试');
                    }
                });
            });
            
            // 立即购买
            $('#buy-now').click(function() {
                var productId = ${product.id};
                var quantity = parseInt($('#quantity').val());
                
                // 跳转到结算页面
                window.location.href = '${pageContext.request.contextPath}/checkout?productId=' + productId + '&quantity=' + quantity;
            });
        });
        
        // 切换主图
        function changeMainImage(imageSrc) {
            $('#main-image').attr('src', imageSrc);
        }
    </script>
</body>
</html> 